<template>
  <div class="topTwo">
    <div class="gg"></div>
    <div class="Carousel">
      <el-carousel
        :interval="3000"
        arrow="always"
        indicator-position="none"
        height="400px"
        width="700px"
      >
        <el-carousel-item>
          <div class="el_img" style="width: 100%;height: 100%;">
            <img
              src="https://img0.baidu.com/it/u=3984883007,2077652558&fm=26&fmt=auto&gp=0.jpg"
            />
          </div>
          <div class="cover">
            <div class="c_title">
              爱心公益
            </div>
            <div class="c_content">
              &nbsp;&nbsp;&nbsp;&nbsp;伸出温暖手，打开爱心门。用我们的爱托起明天的希望，大爱善举，牵手你我他，让爱的接力棒永远传递。奉献爱心，收获希望。关心社会福利
              事业，关爱社会弱势群体。
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div style="width: 100%;height: 100%;" class="el_img">
            <img
              src="https://img2.baidu.com/it/u=1546614105,1523611049&fm=26&fmt=auto&gp=0.jpg"
            />
          </div>
          <div class="cover">
            <div class="c_title">
              关注留守儿童，从我做起
            </div>
            <div class="c_content">
              &nbsp;&nbsp;&nbsp;&nbsp;3月15日中国红十字基金会与内蒙古伊利公益基金会联合发起“伊利营养2020”项目。累计投入8400余万元人民币，60余万儿童从中受益。。
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div style="width: 100%;height: 100%;" class="el_img">
            <img src="../../../assets/image/home/img2.jpeg" />
          </div>
          <div class="cover">
            <div class="c_title">
              关注留守儿童，从我做起
            </div>
            <div class="c_content">
              &nbsp;&nbsp;&nbsp;&nbsp;7月15日，大学生志愿者指导留守孩子写生。
              近日，安徽大学、西南政法大学等高校的50多名大学生志愿者，利用暑假分批来到安徽泾县“王直助教中心”，开展助教献爱心活动。
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="details">
      <div class="details_L">
        <br />
        <span style="margin-left: 30px;color: #ff260f;">今日义卖</span>
        <span
          style="margin-left: 210px;color: #ff260f;"
          @click="more"
          id="moremore"
          >更多</span
        >
        <br />
        <div class="xian"></div>
        <div class="shop">
          <ul id="ym">
            <li
              v-for="item in product"
              :key="item.productHomeImageUrl"
              id="ymym_li"
            >
              <div class="left">
                <img :src="item.productHomeImageUrl" />
              </div>

              <div class="right ">
                <div class="right_title" @click="choosePay(item)">
                  {{ item.productName.substr(0, 11) + "..." }}
                </div>
                <div class="content">
                  &nbsp;&nbsp;&nbsp;&nbsp;{{
                    item.productDetail.substr(0, 25) + "..."
                  }}
                </div>
              </div>
              <hr />
            </li>
          </ul>
        </div>
      </div>
      <div class="details_R">
        <div class="d_title">
          <i style="margin-left:20px"
            ><img src="../../../assets/image/home/tongzhi.png" alt=""
          /></i>
          <span class="d_title_p">通知公告</span>
        </div>
        <div class="msg">
          <div class="msg_msg">
            <span style="position: absolute;top:5%;left:5%">捐赠次数</span>
            <span
              style="position: absolute;top:15%;left:20%;font-size: 18px;color: green;"
            >
              {{ this.times }}{{ this.s1 }} 次</span
            >
            <span style="position: absolute;top:25%;left:5%">捐赠金额</span>
            <span
              style="position: absolute;top:35%;left:20%;font-size: 18px;color:skyblue;"
              >{{ this.moneys }} 元</span
            >
          </div>

          <div class="jz_title">实时捐赠</div>
          <div class="jz" id="jz">
            <ul>
              <li v-for="item in donation" :key="item.index">
                <span id="item_nickname"> {{ item.nickName }}</span>
                <span id="item_money">{{ item.donationMoney }}元</span>
              </li>
              <!--               <li v-for="item in jzData" :key="item.index">-->
              <!--                {{ item.name }} &emsp;&emsp;&emsp;{{ item.money }}-->
              <!--              </li>-->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { find, donation, getnickname, getPic, findType } from "network/home.js";
export default {
  name: "topTwo",
  data() {
    return {
      s1: 771,
      times: "2,891,520,",
      moneys: "4,456,081.45",
      product: [],
      donation: [],
      jzData: [
        {
          name: "王小虎",
          time: "2分钟前",
          money: "1.00元"
        },
        {
          name: "王二虎",
          time: "1分钟前",
          money: "11.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        },
        {
          name: "王三虎",
          time: "20分钟前",
          money: "100.00元"
        }
      ]
    };
  },
  methods: {
    async findProduct() {
      let res = await find();
      console.log("这是商品列表数据：");
      console.log(res);
      this.product = res.payload;
      console.log(this.product);
    },
    choosePay(index) {
      this.$router.push({
        path: "/detail?type=category&id=" + index.productId
      });
      // alert(index.productId);
    },

    donations() {
      donation()
        .then(res => {
          console.log(res);
          this.donation = res.page.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
    hover() {
      $(".el_img").mouseenter(function() {
        $(".cover").css({
          bottom: 0
        });
      });
      $(".Carousel").mouseleave(function() {
        $(".cover").css({
          bottom: -140
        });
      });
    },
    more() {
      this.$router.push("/charity/charityMall");
    }
  },
  mounted() {
    this.findProduct();
    this.donations();
    this.hover();
  }
};
</script>

<style scoped>
.topTwo {
  width: 90%;
  height: 450px;
  position: relative;
  margin: 0 auto;
}

.Carousel {
  width: 30%;
  height: 400px;
  position: relative;
  left: 75px;
  top: 0px;
  background-size: cover;
  float: left;
  border-radius: 5px;
  overflow: hidden;
}
#moremore:hover {
  cursor: pointer;
}
.Carousel img {
  width: 100%;
  height: 100%;
}
el-carousel-item img {
  z-index: 1;
}

.cover {
  width: 100%;
  height: 140px;
  background-color: rgba(181, 197, 198, 0.6);
  z-index: 222;
  position: absolute;
  bottom: -140px;
  transition: all 0.8s;
  color: black;
  cursor: pointer;
}
.c_title {
  position: relative;
  display: block;
  text-align: center;
  font-size: 18px;
  margin-top: 15px;
}

.c_content {
  line-height: 20px;
  font-size: 15px;
  margin-top: 15px;
}
.xian {
  background-image: url("../../../assets/image/home/xian.png");
  background-repeat: no-repeat;
  width: 80%;
  height: 3px;
  margin-left: 30px;
}
.details {
  width: 60%;
  float: left;
  height: 400px;
  margin-left: 90px;
  margin-top: -10px;
}

.details_L {
  width: 55%;
  height: 101%;
  overflow: hidden;
  float: left;
}

.details_L ul {
  overflow: hidden;
}
.details_R {
  width: 45%;
  height: 105%;
  float: left;
}
.shop {
  width: 80%;
  height: 85%;
  position: relative;
  left: 8%;
  top: 2%;
  font-size: 18px;
}

.msg {
  width: 80%;
  height: 85%;
  border-radius: 15px;
  border: 2px solid rgb(253, 234, 203);
  box-shadow: 2px 2px 2px 2px rgb(254, 254, 252);
  position: relative;
  top: 5px;
}

ul li {
  text-decoration: none;
  list-style-type: none;
}
li:hover {
  cursor: pointer;
}
.shop li {
  float: left;
  width: 100%;
  position: relative;
  height: 59px;
}

.shop ul {
  width: 100%;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.time {
  position: absolute;
  right: 10px;
}

.msg_msg {
  width: 100%;
  height: 50%;
  background-image: url("../../../assets/image/home/bgbgs.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.msg ul {
  text-align: center;
  width: 100%;
  height: auto;
}

.msg li {
  text-align: center;
  margin-top: 15px;
}
.jz {
  width: 100%;
  height: 43%;
  background-color: #fff5db;
  position: relative;
  bottom: 0;
  overflow-y: hidden;
  font-size: 13px;
  overflow: hidden;
}
#item_nickname {
  margin-left: 60px;
  float: left;
  text-align: left;
}
.jz_title {
  width: 100%;
  height: 7%;
  background-color: #ffe7bf;
  text-align: center;
  border-radius: 5px;
}

.jz ul {
  background-color: transparent;
  position: relative;
}

.jz li {
  position: relative;
}
#ym {
  overflow: hidden;
}

#ym .left {
  position: absolute;
  left: 0px;
  width: 25%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
}

#ym .left img {
  width: 70%;
  margin-top: 10px;
  height: 70%;
}

#ym .right {
  font-size: 12px;
  position: absolute;
  left: 25%;
  bottom: 0px;
  width: 70%;
  height: 100%;
  transition: all 3s;
}

#ym .right_title {
  width: 100%;
  height: 25%;
  color: #007aff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin-top: 5px;
}

#ym .right .content {
  width: 100%;
  height: 74%;
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  overflow: hidden;
  margin-top: 10px;
}
.d_title {
  width: 80%;
  height: 30px;
  border-radius: 12px;
  border: 1px solid red;
  background-color: #c30000;
  margin-top: 15px;
  color: white;
  position: relative;
}

.d_title_p {
  text-align: center;
  margin-left: 40px;
  line-height: 15px;
  height: 15px;
  position: absolute;
  top: 6px;
}
.gg {
  width: 100%;
  height: 30px;
}
</style>
